<template>
	<view class="content">
		<view class="margin-top-xl text-xsl padding">
			<u-icon v-if="success" name="checkmark-circle-fill" color="#fbbd08" size="240"></u-icon>
			<u-icon v-else name="close-circle-fill" color="red" size="240"></u-icon>
		</view>

		<text class="text-lg">{{success?'支付成功':'支付取消或失败'}}</text>

		<view class="btns flex flex-direction padding-lr-xl margin-tb-xl">
			<button class="cu-btn bg-green block lg" v-if="url" @click="$goto(url)">查看记录</button>
			<button class="cu-btn bg-green block lg" @click="$goto('/pages/tabbar/tab1', 'tab')">返回首页</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				success: null,
				list: [{
						type: 'upgrade',
						url: ''
					},
					{
						type: 'order',
						url: '/pages/shop/main?tab=orders'
					},
					{
						type: 'mobile',
						url: '/pages/mine/record?type=mobile'
					},
					{
						type: 'oilcard',
						url: '/pages/mine/record?type=oilcard'
					},
				]
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.success = opt.success == 'true'
		},
		computed: {
			url() {
				return this.list.find(item => item.type == this.type).url
			}
		}
	}
</script>

<style lang='scss'>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.text-xsl {
			font-size: 200rpx;
		}
	}

	.btns {
		width: 80%;

		.cu-btn {
			margin: 20rpx;
		}

		.bg-green {
			background: linear-gradient(90deg, #dcbe85, #c69542);
		}
	}
</style>
